<template>
<div >
    <div class="mask" v-if="mask" @click="mask=false">
    </div>
    <div v-if="posterUrl" >
      <img :src="posterUrl" class="poster_url"/>
    </div>
    <div v-else ref="poster" class="poster">
          <!-- 里面存放生成图片海报的样式 -->
    </div>
    
  </div>

</template>

<script>
import str from './test'
import html2canvas from 'html2canvas'
import share from '@/mixins/share.js'
export default {
  components: {},
  mixins: [share],
  props: {},
  data() {
    return {
      str: str,
      mask: true,
      posterUrl: '', // 生成海报的url
    }
  },
  computed: {
  },
  watch: {},
  methods: {
   
    // 生成图片
    toImage() {
      return new Promise((resolve) => {
        this.$nextTick(() => {
          const top = document.documentElement.scrollTop || document.body.scrollTop
          html2canvas(this.$refs.poster, {
            scrollY: top,
            scrollX: 0,
            allowTaint: true,
            useCORS: true
          }).then(canvas => {
            this.posterUrl = canvas.toDataURL('image/png')
            resolve()
          })
        })
      })
    },
  },
  created() {
  },
  mounted() {
    setTimeout(() => {
      this.mask = false
    }, 3000)
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
